<template>
	<div class="container">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="电费缴纳" name="first" class="tab">
				<el-descriptions title="缴费明细" direction="vertical" :column="4" size="default" border>
					<el-descriptions-item label="学号">{{ cardInfo.studentcard }}</el-descriptions-item>
					<el-descriptions-item label="姓名" :span="3">{{ globalStore.userInfo.username }}</el-descriptions-item>
					<el-descriptions-item label="房间电费信息" :span="4">
						<span>宿舍号：{{ cardInfo?.floor }}-{{ cardInfo.room }}({{ cardInfo?.build }})</span>
						<span style="margin-left: 30px">电费余额:{{ dian?.room_dian }}元</span>
						<!-- <span style="margin-left: 140px"> <el-button type="primary" icon="Edit" circle @click="editEvent" /></span> -->
					</el-descriptions-item>
					<el-descriptions-item label="缴费">
						<el-input v-model="input" style="width: 140px" placeholder="输入金额" />
						<span style="margin-left: 10px"> <el-button type="primary" plain @click="PayFees('dian')">缴费</el-button></span>
					</el-descriptions-item>
					<!-- <el-descriptions-item label="今日用电(度)">{{ dianCost[0]?.cost_num  }}</el-descriptions-item>
					<el-descriptions-item label="本月用电(度)">{{ dianCost[0]?.cost_num  }}</el-descriptions-item> -->
				</el-descriptions>
			</el-tab-pane>
			<!-- 水费 -->
			<el-tab-pane label="水费缴纳" name="second" class="tab">
				<el-descriptions title="缴费明细" direction="vertical" :column="4" size="default" border>
					<el-descriptions-item label="学号">{{ cardInfo.studentcard }}</el-descriptions-item>
					<el-descriptions-item label="姓名" :span="3">{{ globalStore.userInfo.username }}</el-descriptions-item>
					<el-descriptions-item label="房间电费信息" :span="4">
						<span>宿舍号：{{ cardInfo?.floor }}-{{ cardInfo.room }}({{ cardInfo?.build }})</span>
						<span style="margin-left: 30px">水费余额:{{ dian?.room_water }}元</span>
						<!-- <span style="margin-left: 140px"> <el-button type="primary" icon="Edit" circle @click="editEvent" /></span> -->
					</el-descriptions-item>
					<el-descriptions-item label="缴费">
						<el-input v-model="input" style="width: 140px" placeholder="输入金额" />
						<span style="margin-left: 10px"> <el-button type="primary" plain @click="PayFees('shui')">缴费</el-button></span>
					</el-descriptions-item>
					<!-- <el-descriptions-item label="今日用水(吨)">{{ waterCost[0]?.cost_num }}</el-descriptions-item>
					<el-descriptions-item label="本月用水(吨)">{{  waterCost[0]?.cost_num }}</el-descriptions-item> -->
				</el-descriptions>
			</el-tab-pane>

			<el-tab-pane label="已缴明细" name="third" class="tab2">
				<el-card style="min-width: 480px; width: 49%" class="tab2_item" v-for="it in orserList" :key="it.order_id" shadow="hover">
					<p>缴费时间:{{ it.order_time }}</p>
					<!-- 记住 1是电费 0是水费 -->
					<span>{{ it.order_type === 1 ? "电费充值" : "水费充值" }}:{{ it.order_pay }}</span>
				</el-card>
				<el-button type="primary" @click="clearOrders">清空充值记录</el-button>
			</el-tab-pane>
		</el-tabs>
	</div>
	<!-- 修改宿舍模态框 -->
	<el-dialog v-model="dialogVisible" title="寝室修改" width="500px">
		<el-form :model="form">
			<el-form-item label="学号" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off" disabled style="width: 250px" clearable />
			</el-form-item>
			<el-form-item label="楼栋" :label-width="formLabelWidth">
				<el-select v-model="form.region" placeholder="选择寝室" disabled style="width: 250px" clearable>
					<el-option label="build" value="shanghai" />
				</el-select>
			</el-form-item>
			<el-form-item label="楼层" :label-width="formLabelWidth">
				<el-select v-model="form.floor" placeholder="选择楼层" style="width: 250px" clearable>
					<el-option label="1楼" value="1" />
					<el-option label="2楼" value="2" />
					<el-option label="3楼" value="3" />
					<el-option label="4楼" value="4" />
					<el-option label="5楼" value="5" />
					<el-option label="6楼" value="6" />
				</el-select>
			</el-form-item>
			<el-form-item label="房间" :label-width="formLabelWidth">
				<!-- <el-select v-model="form.room" placeholder="选择房间"  style="width: 250px" clearable>
                    <el-option label="room" value="shanghai" />
                </el-select> -->
				<el-select
					v-model="form.room"
					remote
					reserve-keyword
					@click="remoteMethod"
					clearable
					placeholder="选择房间"
					:loading="loading"
					style="width: 250px"
					loading-text="正在获取房间信息"
				>
					<el-option v-for="item in form.room" :key="item.room_id" :label="item.room" :value="item.room" />
					<template #loading>
						<el-icon class="is-loading">
							<svg class="circular" viewBox="0 0 20 20">
								<g class="path2 loading-path" stroke-width="0" style="animation: none; stroke: none">
									<circle r="3.375" class="dot1" rx="0" ry="0" />
									<circle r="3.375" class="dot2" rx="0" ry="0" />
									<circle r="3.375" class="dot4" rx="0" ry="0" />
									<circle r="3.375" class="dot3" rx="0" ry="0" />
								</g>
							</svg>
						</el-icon>
					</template>
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="ConfirmUpdate"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, inject } from "vue";
// import { KeepAliveStore } from "@/stores/modules/keepAlive";
import {
	getOrder,
	getCardId,
	getDian,
	getBuildId,
	getRoom,
	StudenPayFees,
	StudenUpdateRoom,
	UpdatePayFees,
	DianInfo,
	UpdateWater,
	clearOrder,
	OrderCost
} from "@/api/student/home";
const formLabelWidth = "100px";
const dialogVisible = ref(false);
const cols = ref(5);
const input = ref();
const activeName = ref("first");
const loading = ref(false);
const orserList = ref([]);
const cardInfo = ref({});
const dian = ref();
const water = ref();
const form = reactive({
	name: "",
	region: "",
	floor: "",
	room: []
});
const dianCost = ref([]);
const waterCost = ref([]);
const inputVal = ref("");
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
const handleClick = (tab, event) => {
	// console.log(tab, event)
};
const getStudenOrder = async () => {
	try {
		const res = await getOrder(globalStore.userInfo.id);
		if (res.data.code === 200) {
			orserList.value = res.data.data;
			// console.log(res)
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
const getStudenCardId = async () => {
	try {
		const res = await getCardId(globalStore.userInfo.id);
		if (res.data.code === 200) {
			cardInfo.value = { ...res.data.data[0] };
			form.name = cardInfo.value.studentcard;
			form.region = cardInfo.value.build;
			// console.log(cardInfo.value)
		} else {
			ElNotification({
				message: "获取信息失败",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 获取电费
const getStudenDian = async () => {
	try {
		const res = await getDian(globalStore.userInfo.id);
		if (res.data.code === 200) {
			let _data = await DianInfo({ id: res.data.data[0].room_id });
			if(_data.data.data.length > 1){
				dian.value = _data.data.data[_data.data.data.length -1];
			}else{
				dian.value = _data.data.data[0];
			}
			// console.log(_data)
			
			// console.log(res.data.data[0])
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 选择房间
const remoteMethod = async () => {
	const _floor = form.floor;
	console.log(cardInfo.value.build, _floor);
	if (_floor) {
		loading.value = true;
		try {
			const res = await getBuildId({ name: cardInfo.value.build });
			if (res.data.code === 200) {
				let id = res.data.data[0].build_id;
				const _data = await getRoom({ id: id, floor: _floor });
				// debugger
				// inputVal.value = ''
				form.room = _data.data.data;
				setTimeout(() => {
					loading.value = false;
				}, 1000);
			} else {
				ElNotification({
					message: "获取信息失败 ",
					type: "error",
					duration: 3000
				});
			}
		} catch (error) {
			console.log(error);
		}
	} else {
		form.room = [];
	}
};
//更新房间
const ConfirmUpdate = async () => {
	try {
		const res = await StudenUpdateRoom({ id: globalStore.userInfo.id, floor: form.floor, room: form.room });
		if (res.data.code === 200) {
			setTimeout(() => {
				dialogVisible.value = false;
			}, 1000);
			ElNotification({
				message: "更改成功 ",
				type: "success",
				duration: 1000
			});
		} else {
			ElNotification({
				message: "更改失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 充电费
const PayFees = async types => {
	if (!input.value) {
		ElNotification({
			message: "请输入充值金额 ",
			type: "error",
			duration: 3000
		});
		return;
	}
	// const a = cardInfo.value;
	// debugger;
	// return;
	if (input.value > 0 && input.value <= 500) {
		try {
			const res = await StudenPayFees({
				pay: input.value,
				id: globalStore.userInfo.id,
				type: types === "dian" ? 1 : 0,
				room_id: cardInfo.value.room_id
			});
			if (res.data.code === 200) {
				if (types === "dian") {
					let num = Number(input.value) + Number(dian.value.room_dian);
					await UpdatePayFees({ num, id: globalStore.userInfo.id });
					ElNotification({
						message: "电费充值成功 ",
						type: "success",
						duration: 1000
					});
				} else {
					let waterNum = Number(input.value) + Number(dian.value.room_water);
					await UpdateWater({ num: waterNum, id: globalStore.userInfo.id });
					ElNotification({
						message: "水费充值成功 ",
						type: "success",
						duration: 1000
					});
				}
			} else {
				ElNotification({
					message: "充值失败 ",
					type: "error",
					duration: 3000
				});
			}
		} catch (error) {
			console.log(error);
		}
	} else {
		ElNotification({
			message: "金额超过最大值",
			type: "error",
			duration: 3000
		});
		return;
	}
};
// 获取用电用水量
const getCost =async ()=>{
	try {
		const res = await OrderCost(cardInfo?.value?.room_id);
		if(res.data.code === 200){
			let dian = [];
			let shui = [];
			res.data.data.forEach(it=>{
				if(it?.cost_type === 0){
					dian.push(it);
				}else{
					shui.push(it);
				}
			})
			dianCost.value = dian;
		waterCost.value = shui;
		}
		
		console.log(dianCost,waterCost)
	} catch (error) {
		console.log(error)
	}
}
const editEvent = () => {
	dialogVisible.value = true;
};
// 清空数据
const clearOrders = async () => {
	if (orserList.value <= 0) {
		ElNotification({
			message: "当前没有充值记录 ",
			type: "error",
			duration: 3000
		});
		return;
	} else {
		try {
			const res = await clearOrder(cardInfo.value?.student_id);
			if (res.data.code !== 200) {
				getOrder(globalStore.userInfo.id)
				ElNotification({
					message: "清除成功 ",
					type: "success",
					duration: 3000
				});
			}
		} catch (error) {
			console.log(error);
		}
	}
};
onMounted(() => {
	if(globalStore.userInfo.type === 'student'){
		getStudenOrder();
		getStudenCardId();
		getStudenDian();
	}
	// getCost();
	// setTimeout(()=>{
	// 	getCost();
	// },1500)
});
</script>

<style scoped lang="scss">
.container {
	width: 95%;
	margin: 10px;

	.demo-tabs > .el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;

		.tab2 {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.tab2_item {
				border-radius: 20px;
				margin: 10px 0px;
			}
		}

		.tab {
			width: 50%;

			.el-descriptions {
				margin-top: 20px;
			}
		}
	}
}
.el-select-dropdown__loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	font-size: 20px;
}

.circular {
	display: inline;
	height: 30px;
	width: 30px;
	animation: loading-rotate 2s linear infinite;
}
.path {
	animation: loading-dash 1.5s ease-in-out infinite;
	stroke-dasharray: 90, 150;
	stroke-dashoffset: 0;
	stroke-width: 2;
	stroke: var(--el-color-primary);
	stroke-linecap: round;
}
.loading-path .dot1 {
	transform: translate(3.75px, 3.75px);
	fill: var(--el-color-primary);
	animation: custom-spin-move 1s infinite linear alternate;
	opacity: 0.3;
}
.loading-path .dot2 {
	transform: translate(calc(100% - 3.75px), 3.75px);
	fill: var(--el-color-primary);
	animation: custom-spin-move 1s infinite linear alternate;
	opacity: 0.3;
	animation-delay: 0.4s;
}
.loading-path .dot3 {
	transform: translate(3.75px, calc(100% - 3.75px));
	fill: var(--el-color-primary);
	animation: custom-spin-move 1s infinite linear alternate;
	opacity: 0.3;
	animation-delay: 1.2s;
}
.loading-path .dot4 {
	transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
	fill: var(--el-color-primary);
	animation: custom-spin-move 1s infinite linear alternate;
	opacity: 0.3;
	animation-delay: 0.8s;
}
@keyframes loading-rotate {
	to {
		transform: rotate(360deg);
	}
}
@keyframes loading-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -40px;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -120px;
	}
}
@keyframes custom-spin-move {
	to {
		opacity: 1;
	}
}
</style>
